<template>
    <div>
        <h2>pinia demo</h2>
        <p>a: {{ demo.a }}----{{ demo.doubleA }}</p>
        <p>b: {{ demo.b }}----{{ demo.doubleB }}</p>
        <p>both: {{demo.both}}----{{ demo.doubleBoth }}</p>
        <p>
            <button @click="demo.a++">a++</button>
            <button @click="demo.addA(10)">a++</button>
            <button @click="demo.addA_Async(10)">a++</button>
            <br>
            <button @click="demo.b++">b++</button>
            <button @click="demo.addB">b++</button>
            <button @click="demo.addB_Async">b++</button>
            <br>
            <button @click="demo.addBoth">both++</button>
            <button @click="demo.addBoth_Async">both++</button>
        </p>
        <p>
            <!-- 
                $reset() 重置state数据
                $patch() 修改state数据 (传入一个对象 ->  遍历该对象-> 对应键名修改state数据)
             -->
            <button @click="demo.$reset()">重置</button>
            <button @click="()=>{
                // 一条一条修改比较麻烦
                demo.a =10
                demo.b =20
            }">修改数据</button>

            <button @click="()=>{
                // 对demo(store实例赋值)  => 不允许的
                // demo = {a:10,b:20}

                demo.$patch({a:10,b:20});
            }">修改数据</button>
        </p>



    </div>
</template>

<!-- <script >
    import {useDemoStore} from "@/stores/demo.js";

    const demo = useDemoStore();

    export default {
        data(){
            return {
                demo:demo
            }
        }
        
    }

</script> -->

<script setup>
    import {useDemoStore} from "@/stores/demo.js";

    const demo = useDemoStore();
    console.log("demo",demo);

    // var res= demo.addA();
    // console.log("res",res);

</script>

<style lang="scss" scoped>

</style>